<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件捕获与事件冒泡</title>
</head>
<style>
  #{
        margin: 0;
        padding: 0;
    }

  #root{
    width: 300px;

    height: 300px;
    background: coral;
    margin: 0 auto;
    transform: translateY(50%);
  }

  #outer{
    width: 200px;

    height: 200px;
    background: beige;
    margin: 0 auto;
    transform: translateY(10%);
  }

  #inner{
    width: 100px;

    height: 100px;
    background: chartreuse;
    margin: 0 auto;
    transform: translateY(10%);
  }
</style>
<body>


<div id="root">
  root
  <div id="outer">
    outer
    <div id="inner">
      inner
    </div>
  </div>
</div>
</body>
<script>
  //事件的触发是由window->document->body->root->outer->inner 触发事件的捕获
  //然后inner从里到外触发事件的冒泡
  //事件委托:给容器注册事件,容器内子元素的事件触发会冒泡到容器,根据target即可判断是什么元素
  let root = document.getElementById('root');

  root.addEventListener('click', (e) => {
    let path =  e.path;
    if (!path){
      path = e.composedPath();
    }
    console.log(path);
    [...path].forEach((item) => {
      let handler =  item.onClickCapture;
      if (handler){
        handler();
      }
    })
  })
</script>
</html>